


<template>
	<view class="content">
		<view class="serch"><u-search shape="round" :showAction="false"></u-search></view>
		<view class="classify">
			<view class="left">
				<view :class="num == index ? 'sty leftcout' : 'leftcout'" v-for="(item, index) in leftList" @tap="leftFn(index, item.id)" :key="item.id">
					<text :class="num == index ? 'txt' : ''">{{ item.name }}</text>
				</view>
			</view>
			<view class="right">
				<view v-show="num == index" class="top" v-for="(item, index) in subCategoryList" :key="item.id">
					<image class="imgs" :src="leftList[num].banner_url"></image>

					<view class="txts">{{ item.name }}</view>
				</view>
				<view class="title">
					<view class="titlecout"></view>
					<view class="titlebox">
						<text>{{ leftList[num].name }}</text>
					</view>
					<view class="titlecout"></view>
				</view>
				<!-- 宫格 -->
				<view class="gridbox">
					<u-grid :border="true" @click="click">
						<u-grid-item v-for="(item, index) in subCategoryList" :key="index">
							<u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="item.wap_banner_url" :size="22"></u-icon>
							<text class="grid-text">{{ item.name }}</text>
						</u-grid-item>
					</u-grid>
					<u-toast ref="uToast" />
				</view>
			</view>
		</view>
		<customTabBar></customTabBar>
	</view>
</template>


<script>
import customTabBar from '@/custom-tab-bar/index.vue';
import { Apiclassify, Apiclassify11 } from '@/utils/api.js';
export default {
	components: {
		customTabBar
	},

	data() {
		return {
			num: 0,

			baseList: [],

			leftList: [],
			currentCategory: {},
			subCategoryList: []
		};
	},

	onLoad() {},

	async onShow() {
		this.$store.commit('changeTabbarIndex', 2);
		let res = await Apiclassify();
		console.log(res);
		let { categoryList } = res.data;
		this.currentCategory = res.data.currentCategory;
		this.leftList = categoryList;
		let ret = await Apiclassify11(this.ids);

		let res2 = await Apiclassify11('1005000');
		this.subCategoryList = res2.data.currentCategory.subCategoryList;
	},

	methods: {
		async leftFn(i, id) {
			this.num = i;
			let res = await Apiclassify();
			let { categoryList } = res.data;
			this.leftList = categoryList;
			let ret = await Apiclassify11(id);

			console.log('ret', ret);

			this.subCategoryList = ret.data.currentCategory.subCategoryList;
			console.log(this.subCategoryList);}}}


</script>
<style lang="scss">
.serch {
	height: 80rpx;
	padding: 20rpx;
	display: flex;
	align-items: center;
}
.classify {
	display: flex;
	justify-content: space-between;
	width: 100%;
	height: 100vh;
	.left {
		width: 150rpx;
		height: 100%;
		background-color: #f7f8fa;
		.leftcout {
			height: 120rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.sty {
			background: white;
		}
		.txt {
			display: inline-block;
			text-align: center;
			width: 100%;
			height: 20rpx;
			border-left: 5rpx solid red;
			line-height: 20rpx;
		}
	}
	.right {
		flex: 1;
		// background-color: skyblue;
		.top {
			height: 285rpx;
			width: 100%;
			border-radius: 20rpx;
			padding: 0 12rpx;
			position: relative;
			.imgs {
				width: 570rpx;
				height: 286rpx;
				margin-left: 10rpx;
				box-shadow: 0 0 12rpx #000;
				filter: brightness(0.5);
			}
			.txts {
				height: 30rpx;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				color: white;
			}
		}

		.title {
			width: 300rpx;
			height: 100rpx;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			// background-color: salmon;
			.titlecout {
				width: 60rpx;
				height: 6rpx;
				background: gray;
			}
			.titlebox {
				font-size: 35rpx;
				font-weight: 500;
			}
		}
		.gridbox {
			width: 100%;
			height: 100%;
			border: 1rpx solid #ebedf0;
			.grid-text {
				font-size: 14px;
				color: #909399;
				padding: 10rpx 0 20rpx 0rpx;
				/* #ifndef APP-PLUS */
				box-sizing: border-box;
				/* #endif */
			}
			u-grid-item {
				border: 1rpx solid #ebedf0;
			}
		}
	}
}
</style>
